<template>
  <div class="map" id="map">
    <div class="info" ref="info"></div>
    <div class="marsTiltPanel marsTiltPanel-theme-blue" id="stateShow">
      <i class="close" @click="closeClick1">x</i>
      <div class="marsTiltPanel-wrap">
        <div class="area">
          <div class="arrow-lt"></div>
          <div class="b-t"></div>
          <div class="b-r"></div>
          <div class="b-b"></div>
          <div class="b-l"></div>
          <div class="arrow-rb"></div>
          <div class="label-wrap">
            <div class="title">岳西水厂</div>
            <div class="label-content">
              <div class="data-li">
                <div class="data-label">实时流量：</div>
                <div class="data-value">
                  <span class="label-num">98</span
                  ><span class="label-unit">m³/s</span>
                </div>
              </div>
              <div class="data-li">
                <div class="data-label">水池液位：</div>
                <div class="data-value">
                  <span class="label-num">13.14</span
                  ><span class="label-unit">m</span>
                </div>
              </div>
              <div class="data-li">
                <div class="data-label">水泵状态：</div>
                <div class="data-value">
                  <span
                    id="btn-status1"
                    class="label-tag data-value-status-1"
                    title="中间状态"
                    >1号</span
                  >
                  <span
                    id="btn-status2"
                    class="label-tag data-value-status-0"
                    title="关闭状态"
                    >2号</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="b-t-l"></div>
        <div class="b-b-r"></div>
      </div>
      <div class="arrow"></div>
    </div>
    <div class="task-list1">
      <div class="current-task">
        <div class="top">
          <div class="left">
            <span>正在执行</span>
            <span v-if="currentTask.time">{{
              currentTask.time.slice(-8)
            }}</span>
          </div>
          <div class="right">{{ currentTask.state }}</div>
        </div>
        <div class="center">
          <div class="left">
            <span>位置信息</span>
          </div>
          <div class="right">
            <span>
              <i class="iconfont icon-feng"> </i>
              {{ currentTask.fengsu }}
            </span>
            <span>
              <i class="iconfont icon-jianzhuanquan"> </i>
              {{ currentTask.wendu }}
            </span>
            <span>
              <i class="iconfont icon-xiaoyu"> </i>
              {{ currentTask.qixiang }}
            </span>
            <span>
              <i
                class="iconfont icon-gongxiangdaikuanbaoBWP_gongxiangdaikuanbaojifei_gongxiangdaikuanbaojiangdidaikuan-tengxunyun-"
              >
              </i>
              {{ currentTask.daikuan }}
            </span>
          </div>
        </div>
        <div class="bottom">
          <div class="left">
            <img src="@/assets/imgs/yl.png" alt="" width="100" height="60" />
            <span> {{ taskProgressArr.deviceName }}</span>
          </div>
          <div class="right">
            <div class="status">
              <span> 设备状态： </span>
              <span>
                {{ currentTask.isfly }}
              </span>
            </div>
            <div class="bo">
              <span>电量：</span>
              <span> {{ currentTask.dianliang }}</span>
              <span>续航：</span>
              <span> {{ currentTask.xuhang }}</span>
              <span>速度：</span>
              <span> {{ currentTask.speed }}</span>
              <span>高度：</span>
              <span> {{ currentTask.height }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="next-task" v-if="nextTask">
        <div class="top">
          <div class="left">
            <span>待执行</span>
            <span v-if="nextTask.time">{{ nextTask.time.slice(-8) }}</span>
          </div>
          <div class="right">{{ nextTask.state }}</div>
        </div>
        <div class="center">
          <div class="left">
            <span>位置信息</span>
          </div>
          <div class="right">
            <span>
              <i class="iconfont icon-feng"> </i>
              {{ nextTask.fengsu }}；
            </span>
            <span>
              <i class="iconfont icon-jianzhuanquan"> </i>
              {{ nextTask.wendu }}；
            </span>
            <span>
              <i class="iconfont icon-xiaoyu"> </i>
              {{ nextTask.qixiang }}；
            </span>
            <span>
              <i
                class="iconfont icon-gongxiangdaikuanbaoBWP_gongxiangdaikuanbaojifei_gongxiangdaikuanbaojiangdidaikuan-tengxunyun-"
              >
              </i>
              {{ nextTask.daikuan }}；
            </span>
          </div>
        </div>
        <div class="bottom">
          <div class="left">
            <img src="@/assets/imgs/yl.png" alt="" width="100" height="60" />
            <span> {{ taskProgressArr.deviceName }}</span>
          </div>
          <div class="right">
            <div class="status">
              <span> 设备状态： </span>
              <span>
                {{ nextTask.isfly }}
              </span>
            </div>
            <div class="bo">
              <span>电量：</span>
              <span> {{ nextTask.dianliang }}</span
              >；
              <span>续航：</span>
              <span> {{ nextTask.xuhang }}</span
              >；
              <span>速度：</span>
              <span> {{ nextTask.speed }}</span
              >；
              <span>高度：</span>
              <span> {{ nextTask.height }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Device></Device>
    <Sensor></Sensor>
    <Weapon></Weapon>
    <TaskProgress :taskProgressArr="taskProgressArr"></TaskProgress>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted, inject, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import Sensor from "@/components/Sensor.vue";
import Weapon from "@/components/Weapon.vue";
import Device from "@/components/Device.vue";
import TaskProgress from "@/components/TaskProgress.vue";
import {
  viewerOptions,
  tokentoken,
  compassOptions,
} from "/public/config/cesiumConfig.js";
import { useStore } from "vuex";
const store = useStore();
const props = defineProps({});
let emit = defineEmits([""]);
import { getPosition } from "@/utils/getPosition";
let viewer;
const info = ref(null);
const stateShow = ref(null);
const clickData = ref({});
var clickId = "";
let flag;
let boundary, airportDataSource;
function Popupposition(clock) {
  document.getElementById("stateShow").style.display = "block"; //弹出信息框
  //实时更新位置
  let data = clickData.value;
  //转化为屏幕坐标
  var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
    viewer.scene,
    data.position
  );
  document.getElementById("stateShow").style.left =
    windowPosition.x + 10 + "px";
  document.getElementById("stateShow").style.top =
    windowPosition.y - 260 + "px";

  //解决滚动不隐藏问题
  const camerPosition = viewer.camera.position;
  let height =
    viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
  height += viewer.scene.globe.ellipsoid.maximumRadius;
  if (
    !(Cesium.Cartesian3.distance(camerPosition, data.position) > height) &&
    viewer.camera.positionCartographic.height < 50000000
  ) {
    document.getElementById("stateShow").style.display = "block";
  } else {
    document.getElementById("stateShow").style.display = "none";
  }
}

function closeClick1() {
  document.getElementById("stateShow").style.display = "none";
  viewer.scene.postRender.removeEventListener(Popupposition);
}
var addDataSource;
import CesiumNavigation from "cesium-navigation-es6";

const init = () => {
  Cesium.Ion.defaultAccessToken = tokentoken;
  viewer = new Cesium.Viewer("map", viewerOptions);
  viewer.clock.shouldAnimate = true;
  let thing = new CesiumNavigation(viewer, compassOptions.value);
  store.commit("home/setViewer", viewer);

  viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
    url: "http://localhost:666/map/dixing",
    // url: "http://localhost:666/map/dem-china",
    requestVertexNormals: true, // 请求法线信息，如果不需要可以不要这个选项
    requestWaterMask: true, //一个布尔类型，表示是否请求水面遮罩信息
    hasVertexNormals: true, //只读布尔值，表示该地形提供器是否包含顶点法线信息
    hasWaterMask: true, //只读布尔值，表示该地形提供器是否包含水面遮罩信息
    errorEvent: true, //Event类型，当地形数据请求错误时触发
    availability: true, //定义地形数据可用性的TimeIntervalCollection对象
  });
  addDataSource = new Cesium.CustomDataSource("addDataSource");
  viewer.dataSources.add(addDataSource);
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116, 39, 500000),
    duration: 1,
  });
  boundary = new Cesium.CustomDataSource("boundary");
  airportDataSource = new Cesium.CustomDataSource("airportDataSource");
  viewer.dataSources.add(boundary);
  viewer.dataSources.add(airportDataSource);
  viewer.debugShowFramesPerSecond = true; //显示当前的帧率信息，这样你就可以实时观察到地图的渲染性能
  viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1; // 设置了摄像机的最小缩放距离
  viewer._cesiumWidget._creditContainer.style.display = "none"; //去掉logo
  viewer.scene.highDynamicRange = true;
  viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
  var scene = viewer.scene;
  // viewer.scene.logarithmicDepthBuffer = true
  // 获取具有自定义鼠标样式的元素
  var element = scene.canvas;
  // 添加自定义鼠标样式的类名
  //   element.classList.add("custom-cursor");
  Cesium.Math.setRandomNumberSeed(3);
  viewer.scene.fxaa = true;
  viewer.scene.postProcessStages.fxaa.enabled = true;
  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    var vtxf_dpr = devicePixelRatio;
    // 适度降低分辨率
    while (vtxf_dpr >= 2.0) {
      vtxf_dpr /= 2.0;
    }
    viewer.resolutionScale = vtxf_dpr;
  }
  viewer._container.style.cursor = "pointer";

  // 鼠标滑过

  var ellipsoid = scene.globe.ellipsoid;
  let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction((movement) => {
    // var cartesian = scene.camera.pickEllipsoid(movement.endPosition, Cesium.Ellipsoid.WGS84) //位置数据转换只地理数据类型
    var cartesian = scene.camera.pickEllipsoid(movement.endPosition, ellipsoid); //位置数据转换只地理数据类型

    if (cartesian) {
      // console.log(movement.endPosition);
      //能获取，显示坐标
      var cartographic = ellipsoid.cartesianToCartographic(cartesian); //cesium函数转换至地理数据类型的经纬度
      var ray = viewer.camera.getPickRay(movement.endPosition);
      // console.log(ray);
      if (ray) {
        var cartesian1 = viewer.scene.globe.pick(ray, viewer.scene);
        if (cartesian1) {
          var cartographic = Cesium.Cartographic.fromCartesian(cartesian1);
          var height = cartographic.height; // 的值为地形高度
        }
      }
      //   console.log(height);

      var coords =
        "经度：" +
        Cesium.Math.toDegrees(cartographic.longitude).toFixed(4) +
        " " +
        "纬度：" +
        Cesium.Math.toDegrees(cartographic.latitude).toFixed(4) +
        " " +
        "相机高度：" +
        Math.ceil(viewer.camera.positionCartographic.height) +
        " " +
        " 高程：" +
        height +
        "米";

      info.value.innerHTML = coords;
      info.value.style.display = "block";
    } else {
      info.value.style.display = "none";
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

  // viewer.scene.globe.depthTestAgainstTerrain = true;

  handler.setInputAction(function (movement) {
    var picked = viewer.scene.pick(movement.position);

    if (Cesium.defined(picked) && picked.id.id) {
      flag = picked.id.flag;
      if (!flag) return;
      var cartesian = scene.camera.pickEllipsoid(movement.position, ellipsoid);
      var cartographic = ellipsoid.cartesianToCartographic(cartesian); //cesium函数转换至地理数据类型的经纬度
      let data = {
        name: picked.id.name,
        position: cartesian,
      };
      clickData.value = data;
      viewer.scene.postRender.addEventListener(Popupposition);
    } else {
      closeClick1();
      return;
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};

const taskProgressArr = computed(() => {
  return store.state.home.task;
});

watch(
  () => store.state.home.task,

  (val, preVal) => {
    //val为修改后的值,preVal为修改前的值
    // console.log("message", val,)
    // console.log("message1", preVal,)
    if (val) {
      var controls = [];
      console.log(val, "时间");
      // nowt.value = val;

      val.children.forEach((s) => {
        controls.push(Cesium.Cartesian3.fromDegrees(s.lon, s.lat, s.height));
      });
      for (var i = 0; i < controls.length; i++) {
        viewer.entities.add({
          position: controls[i],
          point: {
            color: Cesium.Color.RED,
            pixelSize: 10,
          },
        });
      }

      let entit = viewer.entities.add({
        polyline: {
          positions: controls,
          width: 3,
          material: Cesium.Color.WHITE,
        },
      });
      viewer.zoomTo(entit);
    }
  },
  {
    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
    //那么首次执行，val为默认值,preVal为undefined
    // immediate: true,
    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
    deep: true,
  }
);

const nowTime = computed(() => {
  return store.state.home.nowTime;
});
const startTime = ref("2022-12-12 12:00:00");

const pointArr = computed(() => {
  return store.state.home.pointArr;
});
var allPoints = pointArr.value;

let timer;
const dzxIsShow = ref(true);

watch(
  () => store.state.home.position,
  (val, pre) => {
    if (val) {
      addModel(val.position, viewer, val.head);
    }
  },
  {
    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
    //那么首次执行，val为默认值,preVal为undefined
    // immediate: true,
    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
    deep: true,
  }
);
function addtarget(val) {
  let entity = viewer.entities.getById(val.id);
  if (entity) return;
  var position = Cesium.Cartesian3.fromDegrees(val.lon, val.lat);

  viewer.entities.add({
    // id: "wrj",
    id: val.id,
    position: position,
    show: true,
    label: {
      pixelOffset: new Cesium.Cartesian2(-30, -40), //此属性为设置偏移量
      text: "敌方",
      font: "8pt Source Han Sans CN", //字体样式
      style: Cesium.LabelStyle.FILL, //label样式
      outlineWidth: 2,
      verticalOrigin: Cesium.VerticalOrigin.TOP, //垂直位置
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
      show: val.isShow,
    },
    billboard: {
      image: "/h.png",
      scale: 1.5,
      width: 20,
      height: 20,
    },
    flag: 1,
  });
}
watch(
  () => store.state.home.target,
  (val, pre) => {
    if (val) {
      // addModel(val.position, viewer, val.head);
      // console.log(val, "发现目标");
      addtarget(val);
    }
  },
  {
    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
    //那么首次执行，val为默认值,preVal为undefined
    // immediate: true,
    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
    deep: true,
  }
);

/**
 * 添加一个爆炸效果
 * @param position
 */
function addBomb(position) {
  console.log("爆炸");
  // 爆炸模型位置
  var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
  var offset = Cesium.Cartesian3.add(
    new Cesium.Cartesian3(0.0, 0.0, 0.0),
    Cesium.Cartesian3.ZERO,
    new Cesium.Cartesian3()
  );
  var emitterModelMatrix = Cesium.Matrix4.fromTranslation(
    offset,
    new Cesium.Matrix4()
  );
  viewer.scene.primitives.add(
    new Cesium.ParticleSystem({
      image: "/fire.png",
      imageSize: new Cesium.Cartesian2(20, 20),
      startScale: 1.0,
      endScale: 4.0,
      // Particle behavior
      particleLife: 1.0,
      speed: 3.0,
      loop: false,
      // Emitter parameters
      emitter: new Cesium.CircleEmitter(0.5),
      emissionRate: 2.0,
      modelMatrix: modelMatrix,
      emitterModelMatrix: emitterModelMatrix,
      lifetime: 3.0,
    })
  );
}

// 发射
const addFS = (data, dataSource, head) => {
  let position = data;

  let entity = dataSource.entities.getById("fs");
  let color = Cesium.Color.RED;
  if (entity) {
    entity.position = new Cesium.CallbackProperty(function () {
      return position;
    }, false); //防止闪烁，在移动的过程
    entity.billboard.rotation = new Cesium.CallbackProperty(function () {
      // return data.troopsType == 2 ? 80 : -data.heading * Math.PI / 180;
      return head ? head : 0;
    }, false); //防止闪烁，在移动的过程
  } else {
    entity = dataSource.entities.add({
      id: "fs",
      position: position,
      show: true,
      label: {
        pixelOffset: new Cesium.Cartesian2(-30, -40), //此属性为设置偏移量
        text: "无人机",
        font: "8pt Source Han Sans CN", //字体样式
        // fillColor: new Cesium.Color.fromBytes(255, 0, 255, 255), //字体颜色
        fillColor: color, //字体颜色
        style: Cesium.LabelStyle.FILL, //label样式
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.TOP, //垂直位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
        show: false,
      },

      billboard: {
        image: "/dd.png",
        scale: 1.5,
        width: 20,
        height: 20,
        rotation: head ? head : 0,
      },

      flag: 1,
    });
  }
};

// 发射导弹
watch(
  () => store.state.home.FS,
  (val, pre) => {
    if (val) {
      // console.log(val, "发射导弹");
      addFS(val.position, viewer, val.head);
      //
    }
  },
  {
    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
    //那么首次执行，val为默认值,preVal为undefined
    // immediate: true,
    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
    deep: true,
  }
);

// 命中爆炸
watch(
  () => store.state.home.BZ,
  (val, pre) => {
    if (val) {
      console.log(val, "命中了");
      let position = Cesium.Cartesian3.fromDegrees(
        val.lon,
        val.lat,
        val.height
      );
      let ene = viewer.entities.getById(val.id);
      let entity = viewer.entities.getById("fs");
      if (ene) {
        viewer.entities.remove(ene);
      }
      if (entity) {
        viewer.entities.remove(entity);
      }
      addBomb(position);
    }
  },
  {
    //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
    //那么首次执行，val为默认值,preVal为undefined
    // immediate: true,
    //这个参数代表监听对象时，可以监听深度嵌套的对象属性
    //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
    deep: true,
  }
);

onMounted(() => {
  init();
  var longitude = 97.6805; // 经度
  var latitude = 31.404; // 纬度

  // 使用Cesium的sampleTerrain函数查询高程
  var promise = Cesium.sampleTerrain(viewer.terrainProvider, 11, [
    Cesium.Cartographic.fromDegrees(Number(longitude), Number(latitude)),
  ]);

  promise
    .then(function (updatedPositions) {
      // updatedPositions 是Cartographic对象的数组
      if (updatedPositions.length > 0) {
        var elevation = updatedPositions[0].height; // 高程
        console.log("Elevation (Terrain): " + elevation + " meters");
      } else {
        console.log("No elevation data available for this location.");
      }
    })
    .catch(function (error) {
      console.error(error);
    });

  // 使用Cesium的sampleTerrainMostDetailed函数查询3D模型上的高程
  var promise2 = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [
    Cesium.Cartographic.fromDegrees(longitude, latitude),
  ]);
  promise2
    .then(function (updatedPositions) {
      // updatedPositions 是Cartographic对象的数组
      if (updatedPositions.length > 0) {
        var elevation = updatedPositions[0].height; // 高程
        console.log("Elevation (3D Model): " + elevation + " meters");
      } else {
        console.log("No 3D model elevation data available for this location.");
      }
    })
    .catch(function (error) {
      console.error(error);
    });
});

// 添加无人机
const addModel = (data, dataSource, head) => {
  let position = data;

  let entity = dataSource.entities.getById("wrj");
  let color = Cesium.Color.RED;
  if (entity) {
    entity.position = new Cesium.CallbackProperty(function () {
      return position;
    }, false); //防止闪烁，在移动的过程
    entity.billboard.rotation = new Cesium.CallbackProperty(function () {
      // return data.troopsType == 2 ? 80 : -data.heading * Math.PI / 180;
      return head ? head : 0;
    }, false); //防止闪烁，在移动的过程
  } else {
    entity = dataSource.entities.add({
      id: "wrj",
      position: position,
      show: true,
      label: {
        pixelOffset: new Cesium.Cartesian2(-30, -40), //此属性为设置偏移量
        text: "无人机",
        font: "8pt Source Han Sans CN", //字体样式
        // fillColor: new Cesium.Color.fromBytes(255, 0, 255, 255), //字体颜色
        fillColor: color, //字体颜色
        style: Cesium.LabelStyle.FILL, //label样式
        outlineWidth: 2,
        verticalOrigin: Cesium.VerticalOrigin.TOP, //垂直位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT, //水平位置
        show: false,
      },

      billboard: {
        // image: `/svg/${data.troopsType}.svg`,
        // image: `/svg/6.svg`,
        image: "/fj.png",
        scale: 1.5,
        // width: data.troopsType == 6 ? 15 : data.troopsType == 7 ? 12 : 20,
        // height: data.troopsType == 6 ? 15 : data.troopsType == 7 ? 12 : 20,
        // scaleByDistance: new Cesium.NearFarScalar(250000, 6.0, 1500000, 1),
        // color: Cesium.Color.fromCssColorString("#cc0000").withAlpha(0.8),
        width: 20,
        height: 20,
        rotation: head ? head : 0,
      },
      monitoItems: data,
      flag: 1,
    });
  }
};
// 时间加一秒

// 当前任务
// const currentTask = ref({});
const currentTask = computed(() => {
  return store.state.home.currentTask;
});

const nextTask = computed(() => {
  return store.state.home.nextTask;
});
</script>
<style scoped lang="scss">
@import "@/styles/control.scss";
@import "@/styles/marsTiltPanel.scss";

.task-list1 {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 200px;
  //   border: 1px solid red;
  z-index: 2;
  display: flex;
  justify-content: space-between;

  .current-task,
  .next-task {
    background: #1a0936;
    height: 100%;
    width: 49%;
    border: 1px solid #31ecf0;
    box-shadow: 0px 0px 5px 1px #31ecf0;

    .top {
      height: 50px;
      border-bottom: 1px solid #31ecf0;
      display: flex;

      .left {
        text-align: center;
        width: 100px;
        border-right: 1px solid #31ecf0;
        display: flex;
        flex-direction: column;
      }

      .right {
        line-height: 50px;
        width: calc(100% - 100px);
        text-align: center;
        font-weight: bold;
      }
    }

    .center {
      width: 100%;
      height: calc((100% - 50px) / 2);
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #31ecf0;
      display: flex;

      .left {
        height: 100%;
        width: 100px;
        border-right: 1px solid #31ecf0;
        text-align: center;
      }

      .right {
        height: 100%;
        width: calc(100% - 100px);
        text-align: center;
        font-weight: bold;
        display: flex;
        justify-content: space-around;
      }
    }

    .bottom {
      height: calc(100% - 90px);

      //   border: 1px solid red;
      display: flex;

      .left {
        height: 100%;
        width: 100px;
        border-right: 1px solid #31ecf0;
        text-align: center;
      }

      .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
      }
    }
  }
}
</style>
